Form Layout

Give your forms some structure—from inline to horizontal to custom grid implementations.

Forms

With Astral.CSS, designing structured, user-friendly forms is simple. Whether you're building a basic form, a complex grid layout, or an inline form, our framework makes it easy to create forms that are both functional and stylish.

Basic Form Structure

Every group of form fields should be wrapped in a <form> element. While Astral.CSS doesn't apply default styling to the <form> itself, the framework leverages powerful browser features to enhance your forms.

Build Complex Forms with the Form Grid

For more complex layouts with multiple columns or varied widths, you can use Astral.CSS’s grid system. This allows you to create sophisticated form layouts with ease.

For even more intricate layouts, use the following structure:

	Email
	


	Password
	


	Address
	


	Address 2
	


	City
	


	State
	
	Choose...
	...
	


	Zip
	


	

	
	
	Check me out
	
	


	Sign in

Column Spacing

Astral.CSS's grid system allows you to control the width of columns with ease. You can specify different column classes like col-7, .col-md-7, or .col-lg-8to make some columns take up more space than others.